<template>
	<view class="realName">
		<view class="tab dis">
			<view class="tabItem" :class="tabId == 0 ? 'avtive' : ''" @click="changeTab(0)">
				<view class="tabName">待审核</view>
			</view>
			<view class="tabItem" :class="tabId == 1 ? 'avtive' : ''" @click="changeTab(1)">
				<view class="tabName">已通过</view>
			</view>
			<view class="tabItem" :class="tabId == 2 ? 'avtive' : ''" @click="changeTab(2)">
				<view class="tabName">已驳回</view>
			</view>
		</view>
		<view class="list p30" v-if="list.length > 0">
			<view class="item card p20 dis" v-for="item in list" :key="item.id" @click="goInfo(item)">
				<view class="top dis">
					<view class="userImg">
						<image :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="userInfo">
						<view class="infoItem dis">
							<view class="lable">昵称:</view>
							<view class="value">{{ item.nickname }}</view>
						</view>
						<view class="infoItem dis">
							<view class="rowA dis">
								<view class="lable">真是姓名:</view>
								<view class="value">{{ item.realName }}</view>
							</view>
							<view class="rowA dis">
								<view class="lable">性别:</view>
								<view class="value">{{ item.sex == 0 ? '男' : item.sex == 1 ? '女' : '未知' }}</view>
							</view>
						</view>
						<view class="infoItem dis">
							<view class="rowA dis">
								<view class="lable">学校:</view>
								<view class="value">{{ item.departmentName }}</view>
							</view>
							<view class="rowA dis">
								<view class="lable">年级:</view>
								<view class="value">{{ item.enrollmentYear }}</view>
							</view>
						</view>
						<view class="infoItem dis">
							<view class="rowA dis">
								<view class="lable">专业:</view>
								<view class="value">{{ item.major }}</view>
							</view>
							<view class="rowA dis">
								<view class="lable">班级:</view>
								<view class="value">{{ item.classTitle }}</view>
							</view>
						</view>
						<view class="infoItem dis">
							<view class="rowA dis">
								<view class="lable">学号:</view>
								<view class="value">{{ item.studentNo }}</view>
							</view>
							<view class="rowA dis">
								<view class="lable">宿舍楼:</view>
								<view class="value">{{ item.dormitory }}</view>
							</view>
						</view>
						<view class="infoItem dis">
							<view class="rowA dis">
								<view class="lable">类型:</view>
								<view class="value">{{ item.userType }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="butList dis" v-if="tabId == 0">
					<view class="but primaryBut" @click.stop="approve(item.id)">通过</view>
					<view class="but errBut" @click.stop="rejectFun(item.id)">驳回</view>
				</view>
				<view class="rejectReason" v-if="tabId == 2">驳回理由:{{ item.rejectReason }}</view>
			</view>
			<view class="noData">没有更多了</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
	</view>
	<up-modal title="驳回理由" :show="showModal" contentTextAlign="center" confirmButtonShape="circle">
		<view class="slot_content">
			<up-input placeholder="请输入驳回理由" border="surround" v-model="reject"></up-input>
		</view>
		<template #confirmButton>
			<view class="modalBut dis">
				<view class="custom_btn nodeBut" @click="okDel">取消</view>
				<view class="custom_btn" @click="okAdd">确定</view>
			</view>
		</template>
	</up-modal>
</template>

<script setup>
import { userIdentity, approvedSubmit } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	schoolId.value = options.schoolId;
});
onShow(() => {
	getList();
});

const goInfo = (item) => {
	const data = JSON.stringify(item);
	uni.navigateTo({
		url: `/admin/review/realInfo?item=${data}`
	});
};

const showModal = ref(false);
const userId = ref(0);
const reject = ref('');
// 审核通过
const approve = (id) => {
	reject.value = '';
	userId.value = id;
	submit(1);
};
// 审核驳回
const rejectFun = (id) => {
	reject.value = '';
	userId.value = id;
	showModal.value = true;
};
const okDel = () => {
	reject.value = '';
	userId.value = 0;
	showModal.value = false;
};
const okAdd = () => {
	submit(2);
};
const submit = async (num) => {
	if (showModal.value && reject.value == '') {
		uni.showToast({
			title: '请输入驳回理由',
			icon: 'none'
		});
		return;
	}
	const data = {
		auditStatus: num,
		rejectReason: reject.value
	};
	const res = await approvedSubmit(userId.value, data);
	console.log(res);
	if (res.code == 0) {
		reject.value = '';
		userId.value = 0;
		showModal.value = false;
		list.value = [];
		total.value = 0;
		pageNum.value = 1;
		getList();
	}
};
// 获取列表
const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(1);
const getList = async () => {
	// 0=男；1=女；2=未知
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		auditStatus: tabId.value == 0 ? 0 : tabId.value == 1 ? 1 : 2
	};
	const res = await userIdentity(schoolId.value, data);
	console.log(res.data.pageInfo.list);
	if (res.code == 0) {
		list.value = [...list.value, ...res.data.pageInfo.list];
		total.value = res.data.pageInfo.total;
	}
};
// tab切换
const tabId = ref(0);
const changeTab = (num) => {
	tabId.value = num;
	list.value = [];
	total.value = 0;
	pageNum.value = 1;
	getList();
};
onReachBottom(() => {
	if (list.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getList();
	}
});
</script>

<style scoped lang="scss">
.realName {
	.tab {
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		background-color: #fff;
		.tabItem {
			// width: 120rpx;
			text-align: center;
			color: #656565;
		}
		.avtive {
			position: relative;
			color: #000;
			font-weight: 700;
			font-size: 30rpx;
		}
		.avtive::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			display: block;
			content: '';
			width: 45rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: #179bf1;
			transform: translateX(-60%);
		}
	}
	.list {
		.item {
			flex-direction: column;
			.userImg {
				margin-right: 20rpx;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background-color: #f7f7f7;
				overflow: hidden;
			}
			.userInfo {
				.infoItem {
					font-size: 24rpx;
					line-height: 50rpx;
					.lable {
						margin-right: 10rpx;
						color: #999;
					}
					.value {
						color: #555;
					}
					.rowA {
						margin-right: 15rpx;
					}
				}
			}
			.butList {
				justify-content: space-around;
				align-items: center;
				padding-top: 15rpx;
				width: 100%;
				.but {
					width: 20%;
					line-height: 55rpx;
					font-size: 24rpx;
					border-radius: 27.5rpx;
					text-align: center;
				}
			}
			.rejectReason {
				line-height: 50rpx;
				font-size: 24rpx;
				color: #fa2c19;
			}
		}
	}
}
.slot_content {
	width: 100%;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
	.custom_btn {
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		text-align: center;
		color: #fff;
		background-color: #3391e6;
	}
	.nodeBut {
		color: #515151;
		background-color: #f0f0f0;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	line-height: 90rpx;
	color: #999;
	text-align: center;
	background-color: #f7f7f7;
}
</style>
